import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:openim_common/openim_common.dart';
import 'feedback_logic.dart';

class FeedbackPage extends StatelessWidget {
  final logic = Get.find<FeedbackLogic>();

  FeedbackPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('问题反馈', style: Styles.ts_0C1C33_17sp_semibold),
        centerTitle: true,
        elevation: 0,
        backgroundColor: Colors.white,
        leading: IconButton(
          icon: const Icon(Icons.close),
          onPressed: () => Get.back(),
        ),
      ),
      body: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [Color(0xFFF6F8FB), Color(0xFFFFFFFF)],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
          ),
        ),
        child: SingleChildScrollView(
          padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 12.h),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 顶部引导
              Container(
                padding: EdgeInsets.all(16.w),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(12.r),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.04),
                      blurRadius: 10,
                      offset: const Offset(0, 4),
                    ),
                  ],
                ),
                child: Row(
                  children: [
                    Container(
                      width: 40.w,
                      height: 40.w,
                      decoration: BoxDecoration(
                        color: Styles.c_FFB300.withOpacity(0.15),
                        shape: BoxShape.circle,
                      ),
                      child: Icon(Icons.feedback_outlined, color: Styles.c_FFB300, size: 22.w),
                    ),
                    12.horizontalSpace,
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text('我们期待你的意见', style: Styles.ts_0C1C33_17sp_semibold),
                          4.verticalSpace,
                          Text('任何问题或建议都可以在此提交，我们会尽快处理。',
                              style: Styles.ts_8E9AB0_12sp),
                        ],
                      ),
                    ),
                  ],
                ),
              ),

              16.verticalSpace,

              // 基本信息分区
              _buildSectionTitle('基本信息', Icons.info_outline),
              8.verticalSpace,
              Container(
                padding: EdgeInsets.all(12.w),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(12.r),
                  border: Border.all(color: Colors.grey[200]!),
                ),
                child: Column(
                  children: [
                    TextField(
                      controller: logic.titleCtrl,
                      decoration: InputDecoration(
                        labelText: '标题',
                        hintText: '请输入反馈标题',
                        prefixIcon: const Icon(Icons.title_outlined),
                        filled: true,
                        fillColor: Colors.grey[50],
                        border: OutlineInputBorder(borderRadius: BorderRadius.circular(10.r)),
                      ),
                    ),
                    12.verticalSpace,
                    TextField(
                      controller: logic.contentCtrl,
                      minLines: 5,
                      maxLines: 10,
                      decoration: InputDecoration(
                        labelText: '内容',
                        hintText: '请详细描述你的问题或建议',
                        prefixIcon: const Icon(Icons.description_outlined),
                        filled: true,
                        fillColor: Colors.grey[50],
                        border: OutlineInputBorder(borderRadius: BorderRadius.circular(10.r)),
                      ),
                    ),
                  ],
                ),
              ),

              16.verticalSpace,

              // 分类与优先级分区
              _buildSectionTitle('分类与优先级', Icons.category_outlined),
              8.verticalSpace,
              Container(
                padding: EdgeInsets.all(12.w),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(12.r),
                  border: Border.all(color: Colors.grey[200]!),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text('类别', style: Styles.ts_0C1C33_17sp_semibold),
                    8.verticalSpace,
                    _buildChipGroup(
                      items: logic.categories,
                      selected: logic.category.value,
                      onSelected: (v) => logic.category.value = v,
                    ),
                    12.verticalSpace,
                    Text('优先级', style: Styles.ts_0C1C33_17sp_semibold),
                    8.verticalSpace,
                    _buildChipGroup(
                      items: logic.priorities,
                      selected: logic.priority.value,
                      onSelected: (v) => logic.priority.value = v,
                      colorMap: {
                        'low': Colors.green[50]!,
                        'medium': Colors.orange[50]!,
                        'high': Colors.red[50]!,
                      },
                      textColorMap: {
                        'low': Colors.green[700]!,
                        'medium': Colors.orange[700]!,
                        'high': Colors.red[700]!,
                      },
                    ),
                  ],
                ),
              ),

              16.verticalSpace,

              // 联系方式分区
              _buildSectionTitle('联系方式（可选）', Icons.contact_mail_outlined),
              8.verticalSpace,
              Container(
                padding: EdgeInsets.all(12.w),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(12.r),
                  border: Border.all(color: Colors.grey[200]!),
                ),
                child: Column(
                  children: [
                    TextField(
                      controller: logic.emailCtrl,
                      keyboardType: TextInputType.emailAddress,
                      decoration: InputDecoration(
                        labelText: '联系邮箱',
                        hintText: '便于我们与您联系',
                        prefixIcon: const Icon(Icons.email_outlined),
                        filled: true,
                        fillColor: Colors.grey[50],
                        border: OutlineInputBorder(borderRadius: BorderRadius.circular(10.r)),
                      ),
                    ),
                    12.verticalSpace,
                    TextField(
                      controller: logic.phoneCtrl,
                      keyboardType: TextInputType.phone,
                      decoration: InputDecoration(
                        labelText: '联系电话',
                        hintText: '便于我们与您联系',
                        prefixIcon: const Icon(Icons.phone_outlined),
                        filled: true,
                        fillColor: Colors.grey[50],
                        border: OutlineInputBorder(borderRadius: BorderRadius.circular(10.r)),
                      ),
                    ),
                  ],
                ),
              ),

              24.verticalSpace,

              // 提交按钮
              Obx(() => Button(
                    text: '提交反馈',
                    enabled: !logic.submitting.value,
                    enabledColor: Styles.c_FFB300,
                    onTap: logic.submit,
                  )),
              8.verticalSpace,
              Center(
                child: Text(
                  '感谢你的帮助，我们会尽快处理。',
                  style: Styles.ts_8E9AB0_12sp,
                ),
              ),
              24.verticalSpace,
            ],
          ),
        ),
      ),
    );
  }
  Widget _buildSectionTitle(String title, IconData icon) {
    return Row(
      children: [
        Icon(icon, color: Styles.c_8E9AB0),
        6.horizontalSpace,
        Text(title, style: Styles.ts_0C1C33_17sp_semibold),
      ],
    );
  }

  Widget _buildChipGroup({
    required List<String> items,
    required String? selected,
    required Function(String) onSelected,
    Map<String, Color>? colorMap,
    Map<String, Color>? textColorMap,
  }) {
    return Wrap(
      spacing: 8.w,
      runSpacing: 8.h,
      children: items.map((e) {
        final bool picked = selected == e;
        final bg = (colorMap != null && colorMap[e] != null)
            ? colorMap[e]!
            : (picked ? Styles.c_FFB300.withOpacity(0.15) : Colors.grey[100]!);
        final tc = (textColorMap != null && textColorMap[e] != null)
            ? textColorMap[e]!
            : (picked ? Styles.c_FFB300 : Styles.c_0C1C33);
        return ChoiceChip(
          label: Text(e, style: TextStyle(color: tc)),
          selected: picked,
          selectedColor: bg,
          backgroundColor: Colors.grey[100],
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.r)),
          onSelected: (_) => onSelected(e),
        );
      }).toList(),
    );
  }
}